import { useCallback, useState } from 'react';

export default function Form() {
  const [value, setValue] = useState('change me');

  const handleChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(
    (event) => {
      console.log(event);
      setValue(event.currentTarget.value);
    },
    [setValue],
  );

  // function一致
  function handleChange2(event: React.ChangeEvent<HTMLInputElement>) {
    setValue(event.currentTarget.value);
  }
  return (
    <>
      <div>useCallback的使用：在第二个参数中提供的依赖项保持不变的情况为函数提供相同的引用</div>
      <input value={value} onChange={handleChange}></input>
      <p>值： {value}</p>
    </>
  );
}
